<%--&lt;%&ndash;--%>
<%--  Created by IntelliJ IDEA.--%>
<%--  User: lenovo--%>
<%--  Date: 2024/6/4--%>
<%--  Time: 20:37--%>
<%--  To change this template use File | Settings | File Templates.--%>
<%--&ndash;%&gt;--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>登录界面</title>--%>
<%--    <style>--%>
<%--        #outerLoginFrame{--%>
<%--            width: 500px;--%>
<%--            height: 400px;--%>
<%--            margin-left: 500px;--%>
<%--            margin-right: 260px;--%>
<%--            margin-top: 150px;--%>
<%--        }--%>

<%--        #innerLoginFrame{--%>
<%--            width: 360px;--%>
<%--            margin-left: 75px;--%>
<%--            margin-top: 45px;--%>
<%--            color: grey;--%>
<%--            font-size: 25px;--%>
<%--        }--%>

<%--        input{--%>
<%--            width: 180px;--%>
<%--            height: 30px;--%>
<%--        }--%>


<%--    </style>--%>


<%--</head>--%>
<%--<body>--%>
<%--<div id="outerLoginFrame" style="border: grey 2px solid">--%>
<%--    <h1 style="margin-top: 40px;margin-left: 130px;">教&nbsp;务&nbsp;管&nbsp;理&nbsp;系&nbsp;统</h1>--%>
<%--    <div id="innerLoginFrame" style="font-size: 25px;">--%>
<%--        <form action="userLogin" method="post" onsubmit="return checkLogin()">--%>
<%--            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;账户：<input type="text" style="font-size: 25px" id="userAccount" name="userAccount" class="myText"><br><br>--%>
<%--            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：<input type="password" style="font-size: 25px" id="userPassword" name="userPassword" class="myText"><br><br>--%>
<%--            <input style="width: 140px;margin-left: 25px"  type="submit" value="登录">--%>
<%--            <a href="register.jsp" style="width: 140px;margin-left: 20px"> | &nbsp;注册</a><br>--%>
<%--            <span style="color: red;font-size: 15px" id="tip">${tip}</span>--%>
<%--        </form>--%>
<%--    </div>--%>

<%--</div>--%>



<%--</body>--%>
<%--</html>--%>

<%--<script>--%>
<%--    function checkLogin() {--%>

<%--        let userAccount = document.getElementById("userAccount").value;--%>
<%--        let userPassword = document.getElementById("userPassword").value;--%>
<%--        if(userAccount==null||userAccount.trim()==""){--%>
<%--            document.getElementById("tip").innerHTML = "账户不能为空";--%>
<%--            return false;--%>
<%--        }--%>
<%--        if(userPassword==null || userPassword.trim()==""){--%>
<%--            document.getElementById("tip").innerHTML = "密码不能为空";--%>
<%--            return false;--%>
<%--        }--%>
<%--        return true;--%>
<%--    }--%>
<%--</script>--%>






<%--&lt;%&ndash;第二代&ndash;%&gt;--%>
<%--&lt;%&ndash;--%>
<%--  Created by IntelliJ IDEA.--%>
<%--  User: lenovo--%>
<%--  Date: 2024/6/4--%>
<%--  Time: 20:37--%>
<%--  To change this template use File | Settings | File Templates.--%>
<%--&ndash;%&gt;--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>登录界面</title>--%>
<%--    <style>--%>
<%--        body {--%>
<%--            display: flex;--%>
<%--            justify-content: center;--%>
<%--            align-items: center;--%>
<%--            height: 100vh;--%>
<%--            margin: 0;--%>
<%--            background-color: #f0f2f5;--%>
<%--            font-family: 'Arial', sans-serif;--%>
<%--        }--%>

<%--        .login-container {--%>
<%--            background-color: white;--%>
<%--            padding: 40px;--%>
<%--            border-radius: 12px;--%>
<%--            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);--%>
<%--            width: 400px;--%>
<%--            text-align: center;--%>
<%--        }--%>

<%--        .login-container h1 {--%>
<%--            margin-bottom: 30px;--%>
<%--            font-size: 32px;--%>
<%--            color: #333;--%>
<%--        }--%>

<%--        .login-container input[type="text"],--%>
<%--        .login-container input[type="password"] {--%>
<%--            width: 100%;--%>
<%--            padding: 12px;--%>
<%--            margin: 10px 0;--%>
<%--            border: 1px solid #ccc;--%>
<%--            border-radius: 6px;--%>
<%--            transition: border-color 0.3s;--%>
<%--        }--%>

<%--        .login-container input[type="text"]:focus,--%>
<%--        .login-container input[type="password"]:focus {--%>
<%--            border-color: #007bff;--%>
<%--            outline: none;--%>
<%--        }--%>

<%--        .login-container input[type="submit"] {--%>
<%--            width: 100%;--%>
<%--            padding: 12px;--%>
<%--            background-color: #007bff;--%>
<%--            border: none;--%>
<%--            border-radius: 6px;--%>
<%--            color: white;--%>
<%--            font-size: 16px;--%>
<%--            cursor: pointer;--%>
<%--            transition: background-color 0.3s;--%>
<%--        }--%>

<%--        .login-container input[type="submit"]:hover {--%>
<%--            background-color: #0056b3;--%>
<%--        }--%>

<%--        .login-container a {--%>
<%--            display: block;--%>
<%--            margin-top: 20px;--%>
<%--            color: #007bff;--%>
<%--            text-decoration: none;--%>
<%--            transition: color 0.3s;--%>
<%--        }--%>

<%--        .login-container a:hover {--%>
<%--            color: #0056b3;--%>
<%--        }--%>

<%--        .error-tip {--%>
<%--            color: red;--%>
<%--            font-size: 14px;--%>
<%--            margin-top: 10px;--%>
<%--        }--%>
<%--    </style>--%>
<%--</head>--%>
<%--<body>--%>
<%--<div class="login-container">--%>
<%--    <h1>教务管理系统</h1>--%>
<%--    <form action="userLogin" method="post" onsubmit="return checkLogin()">--%>
<%--        账户：<input type="text" id="userAccount" name="userAccount"><br><br>--%>
<%--        密码：<input type="password" id="userPassword" name="userPassword"><br><br>--%>
<%--        <input type="submit" value="登录">--%>
<%--        <a href="register.jsp"> | 注册</a><br>--%>
<%--        <span class="error-tip" id="tip">${tip}</span>--%>
<%--    </form>--%>
<%--</div>--%>

<%--<script>--%>
<%--    function checkLogin() {--%>
<%--        let userAccount = document.getElementById("userAccount").value;--%>
<%--        let userPassword = document.getElementById("userPassword").value;--%>
<%--        if (userAccount.trim() === "") {--%>
<%--            document.getElementById("tip").innerHTML = "账户不能为空";--%>
<%--            return false;--%>
<%--        }--%>
<%--        if (userPassword.trim() === "") {--%>
<%--            document.getElementById("tip").innerHTML = "密码不能为空";--%>
<%--            return false;--%>
<%--        }--%>
<%--        return true;--%>
<%--    }--%>
<%--</script>--%>
<%--</body>--%>
<%--</html>--%>






<%--&lt;%&ndash;--%>
<%--  Created by IntelliJ IDEA.--%>
<%--  User: lenovo--%>
<%--  Date: 2024/6/4--%>
<%--  Time: 20:37--%>
<%--  To change this template use File | Settings | File Templates.--%>
<%--&ndash;%&gt;--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>登录界面</title>--%>
<%--    <style>--%>
<%--        body, html {--%>
<%--            margin: 0;--%>
<%--            padding: 0;--%>
<%--            width: 100%;--%>
<%--            height: 100%;--%>
<%--            overflow: hidden;--%>
<%--            display: flex;--%>
<%--            justify-content: center;--%>
<%--            align-items: center;--%>
<%--            background: linear-gradient(to right, #ff7e5f, #feb47b);--%>
<%--            animation: gradient 15s ease infinite;--%>
<%--            font-family: 'Arial', sans-serif;--%>
<%--        }--%>

<%--        @keyframes gradient {--%>
<%--            0% {--%>
<%--                background-position: 0% 50%;--%>
<%--            }--%>
<%--            50% {--%>
<%--                background-position: 100% 50%;--%>
<%--            }--%>
<%--            100% {--%>
<%--                background-position: 0% 50%;--%>
<%--            }--%>
<%--        }--%>

<%--        .login-container {--%>
<%--            background-color: rgba(255, 255, 255, 0.8);--%>
<%--            padding: 40px;--%>
<%--            border-radius: 12px;--%>
<%--            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);--%>
<%--            width: 400px;--%>
<%--            text-align: center;--%>
<%--            box-sizing: border-box;--%>
<%--            transition: transform 0.3s, box-shadow 0.3s;--%>
<%--        }--%>

<%--        .login-container:hover {--%>
<%--            transform: translateY(-10px);--%>
<%--            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);--%>
<%--        }--%>

<%--        .login-container h1 {--%>
<%--            margin-bottom: 30px;--%>
<%--            font-size: 32px;--%>
<%--            color: #333;--%>
<%--        }--%>

<%--        .login-container input[type="text"],--%>
<%--        .login-container input[type="password"] {--%>
<%--            width: 100%;--%>
<%--            padding: 12px;--%>
<%--            margin: 10px 0;--%>
<%--            border: 1px solid #ccc;--%>
<%--            border-radius: 6px;--%>
<%--            transition: border-color 0.3s;--%>
<%--        }--%>

<%--        .login-container input[type="text"]:focus,--%>
<%--        .login-container input[type="password"]:focus {--%>
<%--            border-color: #007bff;--%>
<%--            outline: none;--%>
<%--        }--%>

<%--        .login-container input[type="submit"] {--%>
<%--            width: 100%;--%>
<%--            padding: 12px;--%>
<%--            background-color: #007bff;--%>
<%--            border: none;--%>
<%--            border-radius: 6px;--%>
<%--            color: white;--%>
<%--            font-size: 16px;--%>
<%--            cursor: pointer;--%>
<%--            transition: background-color 0.3s, transform 0.3s;--%>
<%--        }--%>

<%--        .login-container input[type="submit"]:hover {--%>
<%--            background-color: #0056b3;--%>
<%--            transform: scale(1.05);--%>
<%--        }--%>

<%--        .login-container input[type="submit"]:active {--%>
<%--            transform: scale(0.95);--%>
<%--        }--%>

<%--        .login-container a {--%>
<%--            display: block;--%>
<%--            margin-top: 20px;--%>
<%--            color: #007bff;--%>
<%--            text-decoration: none;--%>
<%--            transition: color 0.3s;--%>
<%--        }--%>

<%--        .login-container a:hover {--%>
<%--            color: #0056b3;--%>
<%--        }--%>

<%--        .error-tip {--%>
<%--            color: red;--%>
<%--            font-size: 14px;--%>
<%--            margin-top: 10px;--%>
<%--        }--%>
<%--    </style>--%>
<%--</head>--%>
<%--<body>--%>
<%--<div class="login-container">--%>
<%--    <h1>教务管理系统</h1>--%>
<%--    <form action="userLogin" method="post" onsubmit="return checkLogin()">--%>
<%--        账户：<input type="text" id="userAccount" name="userAccount"><br><br>--%>
<%--        密码：<input type="password" id="userPassword" name="userPassword"><br><br>--%>
<%--        <input type="submit" value="登录">--%>
<%--        <a href="register.jsp"> | 注册</a><br>--%>
<%--        <span class="error-tip" id="tip">${tip}</span>--%>
<%--    </form>--%>
<%--</div>--%>

<%--<script>--%>
<%--    function checkLogin() {--%>
<%--        let userAccount = document.getElementById("userAccount").value;--%>
<%--        let userPassword = document.getElementById("userPassword").value;--%>
<%--        if (userAccount.trim() === "") {--%>
<%--            document.getElementById("tip").innerHTML = "账户不能为空";--%>
<%--            return false;--%>
<%--        }--%>
<%--        if (userPassword.trim() === "") {--%>
<%--            document.getElementById("tip").innerHTML = "密码不能为空";--%>
<%--            return false;--%>
<%--        }--%>
<%--        return true;--%>
<%--    }--%>
<%--</script>--%>
<%--</body>--%>
<%--</html>--%>




<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024/6/4
  Time: 20:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>登录界面</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('static/picture/125.jpg') no-repeat center center fixed;
            background-size: cover;
            font-family: 'Arial', sans-serif;
        }

        .login-container {
            opacity: 0;
            transform: translateY(50px);
            background-color: rgba(255, 255, 255, 0.3);
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
            width: 400px;
            text-align: center;
            box-sizing: border-box;
            transition: transform 0.5s ease-out, opacity 0.5s ease-out, box-shadow 0.3s;
            animation: slideIn 1s forwards;
        }

        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .login-container:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .login-container h1 {
            margin-bottom: 30px;
            font-size: 32px;
            color: #333;
        }

        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: 100%;
            padding: 12px;
            /*margin: 10px 0;*/
            margin: 10px 10px 10px -10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            transition: border-color 0.3s;
        }

        .login-container input[type="text"]:focus,
        .login-container input[type="password"]:focus {
            border-color: #007bff;
            outline: none;
        }

        .login-container input[type="submit"] {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            border: none;
            border-radius: 6px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
        }

        .login-container input[type="submit"]:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        .login-container input[type="submit"]:active {
            transform: scale(0.95);
        }

        .login-container a {
            display: block;
            margin-top: 20px;
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s;
        }

        .login-container a:hover {
            color: #0056b3;
        }

        .error-tip {
            color: red;
            font-size: 14px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="login-container">
    <h1>教务管理系统</h1>
    <form action="userLogin" method="post" onsubmit="return checkLogin()">
        账户：<input type="text" id="userAccount" name="userAccount"><br><br>
        密码：<input type="password" id="userPassword" name="userPassword"><br><br>
        <input type="submit" value="登录">
        <a href="register.jsp"> | 注册</a><br>
        <span class="error-tip" id="tip">${tip}</span>
    </form>
</div>

<script>
    function checkLogin() {
        let userAccount = document.getElementById("userAccount").value;
        let userPassword = document.getElementById("userPassword").value;
        if (userAccount.trim() === "") {
            document.getElementById("tip").innerHTML = "账户不能为空";
            return false;
        }
        if (userPassword.trim() === "") {
            document.getElementById("tip").innerHTML = "密码不能为空";
            return false;
        }
        return true;
    }

    // Optional: Add a delay before showing the login container to enhance the animation effect
    window.onload = function() {
        setTimeout(function() {
            document.querySelector('.login-container').style.animation = 'slideIn 1s forwards';
        }, 500); // Delay of 500ms before starting the animation
    };
</script>
</body>
</html>